<template>
  <n-form class="" label-placement="left" :label-width="160">
    <!-- 路由 -->
    <template v-if="type == '路由'">
      <n-form-item label="路由中文名：" path="cName">
        <n-input
          class="input-width"
          v-model:value="ruleForm.cName"
          placeholder="路由中文名"
        />
      </n-form-item>
      <n-form-item label="路由英文名：" path="EName">
        <n-input
          class="input-width"
          v-model:value="ruleForm.EName"
          placeholder="路由英文名"
        />
      </n-form-item>
      <n-form-item label="路由路径：" path="path">
        <n-input
          v-model:value="ruleForm.path"
          class="input-width"
          placeholder="路由路径"
        />
      </n-form-item>
      <n-form-item label="组件绝对路径：" path="filePath">
        <n-input
          class="input-width"
          v-model:value="ruleForm.filePath"
          placeholder="组件绝对路径"
        />
      </n-form-item>
    </template>

    <!-- api -->
    <template v-if="type == 'api'">
      <n-form-item label="请求名称" path="name">
        <n-input
          class="input-width"
          v-model:value="ruleForm.name"
          placeholder="请求名称"
        />
      </n-form-item>
      <n-form-item label="请求路径：" path="path">
        <n-input
          v-model:value="ruleForm.path"
          class="input-width"
          placeholder="请求路径"
        />
      </n-form-item>
      <n-form-item label="请求方式：" path="method">
        <n-input
          v-model:value="ruleForm.method"
          class="input-width"
          placeholder="请求方式"
        />
      </n-form-item>
      <n-form-item label="请求头：" path="header">
        <n-input
          class="input-width"
          v-model:value="ruleForm.header"
          placeholder="请求头"
        />
      </n-form-item>
    </template>

    <!-- 组件库 -->
    <template v-if="type == '组件库'">
      <n-form-item label="组件名称" path="cName">
        <n-input
          class="input-width"
          v-model:value="ruleForm.cName"
          placeholder="组件名称"
        />
      </n-form-item>
      <n-form-item label="组件英文名：" path="name">
        <n-input
          v-model:value="ruleForm.name"
          class="input-width"
          placeholder="组件英文名"
        />
      </n-form-item>

      <div class="prop-box">
        <div>属性：</div>
        <div
          class="flex item-box"
          v-for="(item, index) in ruleForm.propList"
          :key="index"
        >
          <n-input v-model:value="item.name" placeholder="属性名称" />
          <n-input v-model:value="item.description" placeholder="属性描述" />

          <n-button
            @click="delItem(index)"
            style="font-size: 20px;"
            strong
            secondary
            v-if="index > 0"
            circle
          >
            -
          </n-button>

          <n-button
            @click="addItem"
            style="font-size: 20px;margin-right: 10px;"
            strong
            secondary
            circle
            v-if="index == ruleForm.propList.length - 1"
            type="primary"
          >
            +
          </n-button>
        </div>
      </div>
    </template>

    <n-form-item label="">
      <n-button
        class="input-width"
        style="margin-left:160px;"
        type="primary"
        block
        secondary
        strong
        @click="submit"
      >
        确定
      </n-button>
    </n-form-item>
  </n-form>
</template>

<script>
import { inject, reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      ruleForm: {
        propList: [{}]
      },
      type: inject("propObj").type
    });

    const methods = reactive({
      submit: () => {},
      addItem: () => {
        data.ruleForm.propList.push({});
      },
      delItem: index => {
        data.ruleForm.propList.splice(index, 1);
      }
    });

    return {
      ...toRefs(data),
      ...toRefs(methods)
    };
  }
};
</script>

<style lang="scss" scoped>
.prop-box {
  margin-left: 100px;
  .item-box {
    margin-bottom: 20px;
    margin-left: 60px;
    ::v-deep .n-input {
      width: 190px !important;
      margin-right: 20px;
    }
  }
}
</style>
